<template>

<!--  注意:model validate验证方法才会生效，但是树形结构的表格不支持行内验证，控制台报错-->
  <el-form :model="form" ref="formRef">
    <el-table
        :data="form.tableData"
        style="width: 100%"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="date"
          label="日期"
          width="180">

      </el-table-column>
      <el-table-column
          label="合格" prop="num">
        <template slot-scope="scope">
          <el-form-item :prop="`tableData.${scope.$index}.num`"
                        :rules="[{
                                 validator:(rule, value, callback)=>validatorCom(rule, value, callback,scope.row,'num','notNum',scope.$index,'tableData',this)
                               }]">
            <el-input v-model="scope.row.num" clearable></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
          label="不合格" prop="notNum">
        <template slot-scope="scope">
          <el-form-item :prop="`tableData.${scope.$index}.notNum`"
                        :rules="[{
                                 validator:(rule, value, callback)=>validatorCom(rule, value, callback,scope.row,'num','notNum',scope.$index,'tableData',this)
                               }]">
            <el-input v-model="scope.row.notNum" clearable></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>

    <el-button @click="checkForm">验证</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form:{
        tableData: [
            {
              id:'1',
              date: '2016-05-03',
                num:'',notNum:'1',
                children: [{
                  id:'2',
                  date: '2016-05-04',
                  num:'',notNum:'1',
                },{
                  id:'3',
                  date: '2016-05-04',
                  num:'',notNum:'1',
                }]
             },
            {
              id:'4',
              date: '2',
              num:'',notNum:'1',
              children: [{
                id:'22',
                date: '22',
                num:'',notNum:'1',
              },{
                id:'33',
                date: '33',
                num:'',notNum:'1',
              }]
          }

       ]
      },
      rules: {
        date: [
          { required: true, message: '请输入日期', trigger: 'blur' }
        ]
      },
    };
  },
  methods: {
    // validate(rowIndex) {
    //   this.$refs.form[rowIndex].validate((valid) => {
    //     if (valid) {
    //       alert('验证通过');
    //     } else {
    //       alert('验证失败');
    //       return false;
    //     }
    //   });
    // },
    validatorCom(rule, value, callback,rowData,prop1,prop2,rowIndex,validatePropPrefix,tableForm){
      console.log('----:',rule, value, callback,rowData)
      if (Number(rowData[prop1]) < Number(rowData[prop2])){
        callback('不合格数不能大于合格数')
      }else{
        callback()
        //清空rowIndex行的prop1和prop2单元格的验证
        this.$refs.formRef.clearValidate([`${validatePropPrefix}.${rowIndex}.${prop1}`,`${validatePropPrefix}.${rowIndex}.${prop2}`])
      }
    },
    checkForm(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('验证通过')
        }else{
          console.log('验证不通过')
        }
      })
    },

  }
}
</script>
